<template>
    <div>
        <heard :title="title"></heard>
        <div v-for="item in cartData" v-if="cartData.length > 0">
            <van-swipe-cell>
                <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                    <template #thumb>
                        <div style="width: 100px;height: 90px;display: flex;">
                            <van-checkbox v-model="item.checked"></van-checkbox>
                            <img :src="item.goods.goods_small_logo ? item.goods.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                alt="" style="width:75px;height: 75px;">
                        </div>

                    </template>
                    <template #num>
                        <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />

                    </template>
                </van-card>

                <template #right>
                    <van-button square text="删除" @click="de(item.id)" type="danger" class="delete-button"
                        style="height: 100%;" />
                </template>
            </van-swipe-cell>
        </div>
         <div v-else>
             <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
            description="暂无数据" />

        </div>
       

    </div>
     <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked">全选</van-checkbox>
        </van-submit-bar>
</template>

<script setup>
import heard from '@/components/heard.vue';
const title = "购物车"
import { useCounterStore } from '@/stores/cart'
import { computed } from 'vue';
import { ref } from 'vue';
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
console.log(store.cart)
let cartData = ref([])
const cart = () => {
    cartData.value = store.cart
}
cart()
const de = (id) => {
    store.cart = store.cart.filter(item => item.id != id)
    cart()
}
const checked = computed({
    get() {
        if (cartData.value.length == 0) {
            return false
        }
        else {
            return cartData.value.every(item => item.checked)
        }
    },
    set(val) {
        console.log(val)
        cartData.value.forEach(item => item.checked = val)
    }
})
let allprice = computed(() => {
    let allprice = ref(0)
    let ok = cartData.value.filter(item => item.checked)
    ok.forEach((item) => {
        allprice.value += item.number * item.goods.goods_price
    })
    return allprice.value * 100

})
import _ from 'lodash'
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter()
import { createApi } from '@/api/api';
const onSubmit = _.debounce(() => {
    let ok = cartData.value.filter(item => item.checked)
    if (ok.length == 0) {
        showToast('请选择商品')
    }
    else {
        createApi({
            goodsIds: ok.map(item => item.goods.goods_id).join(','),
            username: localStorage.getItem('username'),
            product_code: ok[0].goods.goods_name,
            totalPrice: allprice.value,
            nums: ok.map(item => item.number).join(','),

        }).then(res => {
            console.log('res')
            router.push('/order/' + res.data.data.orderId)
        })

    }
})




</script>

<style lang="scss" scoped></style>